<template>
    <div class="designer-card">
        <div class="designer-user" @click="bindTapDesign()">
            <img
                class="designer-avatar"
                :src="props.designer.avatar"
                alt="店铺logo"
            />
            <div class="user-profile">
                <h1 class="name">{{props.designer.nickname}}</h1>
                <p class="profile">销售量 {{props.designer.totalOrders}} · 粉丝数 {{props.designer.designerFollowCount}} · 作品数 {{props.designer.productCount}}</p>
            </div>
            <button class="like-btn " v-if="props.designer.follow" @click.stop.prevent="bindTap('u')">+ 关注</button>
            <button class="like-btn accent-black " v-else @click.stop.prevent="bindTap('f')">已关注</button>
        </div>
        <!-- 商品列表 -->
        <div class="good-ul" v-if="props.showGood && designer.products?.length">
            <HeatGood
                class="good-li"
                v-for="(item, index) in designer.products"
                :key="index"
                :good="item"
            >
            </HeatGood>
        </div>
    </div>
</template>
<script setup lang="ts">
import HeatGood from "@/components/HeatGood.vue";
import { followUnfollowDesigner } from "@/api/designUser";
import { _router } from '@/utils/oldIndex';
import { watch, ref } from "vue";

const props = defineProps({
  designer: {
      type: Object,
      default: () => {},
    },
  showGood: {
      type: Boolean,
      default: false,
    },
});

const designerFollowCount = ref(0);
watch(() => props.designer.designerFollowCount, () => {
  designerFollowCount.value = props.designer.designerFollowCount;
})

const bindTap = (type) => {
  followUnfollowDesigner({ designerUid: props.designer.uid, type}).then(() => {
    props.designer.follow = !props.designer.follow;
    console.log(props.designer.designerFollowCount, 'ssssssssssssssss');
    props.designer.designerFollowCount = props.designer.designerFollowCount + (type === 'u' ? 1 : -1);
    // designerFollowCount.value = designerFollowCount.value + (type === 'f' ? 1 : -1);
  })
}

const bindTapDesign = () => {
  _router.push({
    path: '/pages/designer/main',
    query: {
      id: props.designer.uid,
    },
  });
}
</script>
<style scoped lang="scss">
.designer-card {
    background: #ffffff;
    padding: 20rpx 0 20rpx 16rpx;
    .designer-user {
        display: flex;
        align-items: center;
        height: 128rpx;
        .designer-avatar {
          min-width: 80rpx;
          min-height: 80rpx;
            width: 80rpx;
            height: 80rpx;
            border-radius: 58rpx 58rpx 58rpx 58rpx;
        }
        .user-profile {
            margin: 0 20px;
            .name {
                height: 38rpx;
                font-weight: 400;
                font-size: 28rpx;
                color: #222222;
                line-height: 38rpx;
            }
            .profile {
                height: 28rpx;
                font-weight: 400;
                font-size: 20rpx;
                color: #6f6f6f;
                line-height: 28rpx;
                margin: 4px 0 0;
            }
        }
        .like-btn {
            width: 108rpx;
            height: 48rpx;
            background: #ffffff;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            font-weight: 400;
            font-size: 28rpx;
            text-align: center;
            line-height: 48rpx;
            padding: 0;
            border: 2rpx solid #b7b7b7;
            color: #b7b7b7;
          margin-right: 16rpx !important;
            &.accent-black {
              border: 2rpx solid #f25a27;
              color: #f25a27;
            }
        }
    }

    .good-ul {
        width: calc(100vw - 32rpx);
        display: flex;
        gap: 16rpx;
        overflow: auto;
    }
}
</style>
